<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">

<html>
<head>
<script lang=javascript src='pine.js' type='text/javascript'></script>
<link rel=stylesheet href='pine.css' type='text/css'></link>
</head>
<body>

<div id='tree'></div>

<script>

  t = new jPine(document.getElementById('tree'), {
     '1test item' : 
     {
      '21test' : 
        {
          '' : {'value':'(0/<b>3</a>)', 'id':100},
          '31\'aaa/bbb':0, 
          '32':0, 
          '33':0
        }, 
        '22test item':0
     }
  });

   var currItem = null;

   t.onClick = function(item) {
      currItem = item;
      document.getElementById('rembtn').style.display = 'block';
      document.getElementById('rembtn').innerHTML = 'Remove ' + currItem.name;


      console.log(item.nextSibling);
   }

   t.expandAll();

   tStates = [];
</script>

<br>
<button onclick="t.expandAll()">Expand All</button>
<br>
<button onclick="t.collapseAll()">Collapse All</button>
<br>
<button onclick="tStates=t.getStates()">Get States</button>
<br>
<button onclick="t.setStates(tStates)">Set States</button>
<br>
<button id='rembtn' onclick="t.remove(currItem)" style="display:none;"></button>
<hr>

<div id='checktree'></div>

<style>
	#tree {
		overflow-x: auto;
	}

  .inavail {
    color:gray!important
  }

  .emptyIcon {
     background-position: -48px -48px!important;
  }

</style>

<script>

  ctree = new jPineCheck(document.getElementById('checktree'), {
     'z1test item' : 
     {
      '21test' : 
        {
          '' : {'value':'(0/<b>3</b>)', 'id':100},
          'z31':{'':{'checked':1}}, 
          'z32':0, 
          'z33':0
        }, 
        'not available to check':
        {
          '' : {
           'inavail' : true,
           'nameClass' : 'inavail',
           'folderClass' : 'emptyIcon'
          }
        }
     }
  });

  ctree.onCheck = function(item) {
     if (!item.properties.inavail) {
        jPineCheck.prototype.onCheck(item);
     }
  }

  ctree.expand();

  function showCheckedItems()
  {
      var s = '';
      var checkedItems = ctree.getChecked();
      for (i in checkedItems) {
         s += ' ' + checkedItems[i].name;
      }
      alert(s);
  }

</script>

<button onclick='showCheckedItems()'>Show cheked items</button>

</body>
</html>

